<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- media 在print中，使用打印功能，才显示index.css -->
		<!-- <link rel="stylesheet" type="text/css" href="index.css" media="print"/> -->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#wrap {
				width: 100px;
				height: 100px;
				border: 1px solid;
				margin: 100px auto;
			}

			/*
			表示
			1、你得是彩色的屏幕
			2、你的浏览器宽度为800px
			
			width:浏览器窗口的尺寸
			
			min-width和max-midth表示最小的尺寸和最大的尺寸
			达到这个条件就显示。
			
			device-width:设备宽度，这里就是屏幕的分辨率的宽度的像素
				pc端：分辨率
				移动端：具体看机器的参数
			min-device-width
			
			device-pixel-ratio:1 简写为DPR，这个一般要加前缀 -webkit
			变成 -webkit-device-pixel-ratio 才会有效
				pc：肯定是1
				移动端：具体看机器
				
			orientation:portrait 代表竖屏。宽度比高度小，叫做竖屏。
			orientation:landscape 代表横屏。
			
			and 代表条件连接
			only 一般的写法 only screen。和浏览器兼容性有关。
				看不懂视频在说什么，但是建议一定要加。
				老版本的浏览器只支持媒体类型，不支持带媒体属性的查询。
					@media screen{}
					
			all 所有满足条件的设备
			
			not 表示不符合条件
			*/

			/* @media screen and (width:800px) { */
			/* @media screen and (min-width:1000px) { */
			/* @media screen and (device-min-width:1000px) { */
			/* @media screen and (-webkit-device-pixel-ratio:1) { */
			/* @media screen and (orientation:portrait) { */
			/* @media screen and (orientation:portrait) and (-webkit-device-pixel-ratio:3) { */
			/* @media only screen and (min-width:800px){ */
			@media only screen and (min-width:800px), all (-webkit-device-pixel-ratio:2) {
				#wrap {
					border: 50px solid;
				}
			}
		</style>
	</head>
	<body>
		<div id="wrap"></div>
	</body>
</html>
